<template>
  <el-dialog
      v-model="diaVisible"
      title="新增灯具"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px"
      @close="resetForm"
  >
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item label="实际灯名" prop="lightnameFact">
        <el-input v-model="ruleForm.lightnameFact" placeholder="请输入实际灯名"/>
      </el-form-item>
      <el-form-item label="朝向" prop="manual">
        <el-select v-model="ruleForm.manual" placeholder="请选择朝向">
          <el-option label="东" value="1"/>
          <el-option label="南" value="2"/>
          <el-option label="西" value="3"/>
          <el-option label="北" value="4"/>
        </el-select>
      </el-form-item>
      <el-form-item label="网关" prop="gatewayId" v-if="currentStr == 'bridge'">
        <el-select v-model="ruleForm.gatewayId" @change="changeGateway" placeholder="请选择网关">
          <el-option :label="item.gatewayName"
                     :value="item.gatewayId"
                     v-for="item in currentItem.gatewaylist" />
        </el-select>
      </el-form-item>
      <el-form-item label="映射开关" prop="lightname">
        <el-select v-model="ruleForm.lightname" placeholder="请选择映射开关">
          <el-option :label="item.lightname"
                     :value="item.lightname"
                     v-for="item in lightList" />
        </el-select>
      </el-form-item>
      <el-form-item label="页面位置" prop="lightnameUi">
        <el-select v-model="ruleForm.lightnameUi" placeholder="请选择页面位置">
          <el-option :label="item.name"
                     :value="item.name"
                     :disabled="item.disabled"
                     v-for="item in lightnameUiList" />
        </el-select>
      </el-form-item>
      <el-form-item label="相位" prop="phase">
        <el-select v-model="ruleForm.phase" placeholder="请选择相位">
          <el-option label="A" value="A"/>
          <el-option label="B" value="B"/>
          <el-option label="C" value="C"/>
        </el-select>
      </el-form-item>
      <el-form-item label="功率" prop="power">
        <el-input-number v-model="ruleForm.power" :precision="2" :step="0.1" :min="0" :max="100" style="width: 100%" />
      </el-form-item>
      <el-form-item label="电流" prop="electric">
        <el-input-number v-model="ruleForm.electric" :precision="2" :step="0.1" :min="0" :max="100" style="width: 100%"/>
      </el-form-item>
      <el-form-item label="控制箱" prop="box">
        <el-select v-model="ruleForm.box" placeholder="请选择控制箱">
          <el-option label="M1" value="M1"/>
          <el-option label="M2" value="M2"/>
          <el-option label="M3" value="M3"/>
          <el-option label="M4" value="M4"/>
          <el-option label="M5" value="M5"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="resetForm" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {insertLight} from "../../router/api.js";

export default {
  name: "addLamp",
  data(){
    return {
      diaVisible: false,
      ruleForm: {
        lightnameFact: '',
        manual: '',
        lightname: '',
        gatewayId: '',
        lightnameUi: '',
        phase: '',
        power: '',
        electric: '',
        box: ''
      },
      ruleFormClone: {},
      rules: {
        lightnameFact: [
          {required: true, message: '请输入实际灯名', trigger: 'blur'},
        ],
        manual: [
          {required: true, message: '请选择朝向', trigger: 'change'},
        ],
        lightname: [
          {required: true, message: '请选择映射开关', trigger: 'change'}
        ],
        gatewayId: [
          {required: true, message: '请选择网关', trigger: 'change'}
        ],
        lightnameUi: [
          {required: true, message: '请选择页面位置', trigger: 'change'}
        ],
        phase: [
          {required: true, message: '请选择相位', trigger: 'change'}
        ],
        power: [
          {required: true, message: '请输入功率', trigger: 'blur'},
        ],
        electric: [
          {required: true, message: '请输入电流', trigger: 'blur'},
        ],
        box: [
          {required: true, message: '请选择控制箱', trigger: 'change'}
        ],
      },
      currentItem: {},
      currentStr: '',
      lightnameUiList: [],
      lightList: [],
      mappingData: []
    }
  },
  created() {
    this.ruleFormClone = JSON.parse(JSON.stringify(this.ruleForm))
  },
  methods: {
    show(item,str, mappingData) {
      this.lightnameUiList = [];
      this.diaVisible = true;
      this.currentItem = item;
      this.currentStr = str;
      this.mappingData = JSON.parse(JSON.stringify(mappingData));

      let len = 0
      if(str == 'house'){
        len = 24;
        this.lightList = JSON.parse(JSON.stringify(this.mappingData));
      }else{
        this.lightList = [];
        if(item.brigeArea == 1){
          len = 48
        }else{
          len = 60
        }
      }

      for(let i = 0; i < len; i++){
        this.lightnameUiList.push({
          name: i+1,
          disabled: false
        })
      }

      item.lightList.forEach(opt => {
        let val = this.lightnameUiList.find(o => o.name == opt.lightnameUi);
        if(val){
          val['disabled'] = true;
        }
      })
    },
    changeGateway(val){
        let data = JSON.parse(JSON.stringify(this.mappingData));
        this.lightList = data.filter(opt => opt.gatewayId == val)
    },
    submitForm() {
      this.$refs['ruleFormRef'].validate(async (valid) => {
        if (valid) {
          let {lightnameFact, manual, lightname, lightnameUi,phase,power,electric,box} = this.ruleForm;
          let gatewayId = '';
          if(this.currentStr == 'house'){
            gatewayId = this.currentItem.gatewaylist.gatewayId;
          }else{
            gatewayId = this.ruleForm.gatewayId
          }
          let params = {
            gatewayId,
            lightname,
            lightnameFact,
            phase,power,electric,box,
            manual,
            lightType: 1,
            lightnameUi
          };
          insertLight(params).then(res => {
            if (res.data.code == 200) {
              // this.$message.success(res.data.msg);
              this.resetForm();
              this.$emit('saveOk')
            } else {
              // this.$message.warning(res.data.msg)
            }
          })
        }
      });
    },
    resetForm() {
      this.diaVisible = false;
      this.ruleForm = this.ruleFormClone;
      this.$refs['ruleFormRef'].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
